<template>
    <div class="app-container">
      <div class="contentBox">
          <el-row>
            <el-text class="title">出入库记录</el-text>
          </el-row>
          <div class="tableTitle">
            <el-form ref="queryRef" :model="queryParams" :inline="true">
              <el-row>
                <el-col :span="24">
                  <div class="pageFlex">
                    <div class="partName">时间查询</div>
                    <el-form-item prop="time" style="margin: 0;flex: 1;border-bottom: 1px solid #ebeef5;padding: 0 10px">
                      <el-date-picker
                        v-model="queryParams.time"
                        type="datetimerange"
                        range-separator="到"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="YYYY/MM/DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        @change="handleQuery()"
                        class="inputBox"
                      />
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="pageFlex">
                    <div class="partName">商品ID查询</div>
                    <el-form-item prop="goodsId">
                      <el-input
                        class="inputBox"
                        v-model="queryParams.goodsId"
                        placeholder="请输入商品ID查询"
                        clearable
                        @keyup.enter="initData()"
                        @clear="initData()"
                      />
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="pageFlex">
                    <div class="partName">出入库类型查询</div>
                    <el-form-item prop="operationType">
                      <el-select class="inputBox" v-model="queryParams.operationType" placeholder="请选择类型" clearable
                        @change="handleQuery()">
                        <el-option v-for="dict in good_in_out_storage" :key="dict.value" :label="dict.label" :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
            </el-form>
            <el-row>
              <el-col :span="12">
                  <div class="pageFlex">
                      <div class="partName">商品名称</div>
                      <div class="value textOverflow1">{{ formData.name || '暂无'}}</div>
                  </div>
              </el-col>
              <el-col :span="12">
                  <div class="pageFlex">
                      <div class="partName">商品编码</div>
                      <div class="value textOverflow1">{{ formData.goodsNo || '暂无' }}</div>
                  </div>
              </el-col>
              <el-col :span="12">
                <div class="pageFlex">
                  <div class="partName">商品库存</div>
                  <div class="value textOverflow1">{{ formData.stock || 0 }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="pageFlex">
                  <div class="partName">价格</div>
                  <div class="value textOverflow1">￥{{ formData.price }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="pageFlex">
                  <div class="partName">成本价格</div>
                  <div class="value textOverflow1">￥{{ formData.costPrice }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="pageFlex">
                  <div class="partName">平均成本价格</div>
                  <div class="value textOverflow1">￥{{ formData.averageCostPrice || 0 }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="pageFlex">
                  <div class="partName">历史最高成本价</div>
                  <div class="value textOverflow1" style="color: var(--el-color-danger);font-weight: 500;">￥{{ formData.maxCostPrice }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="pageFlex">
                  <div class="partName">历史最低成本价</div>
                  <div class="value textOverflow1" style="color: var(--el-color-success);font-weight: 500;">￥{{ formData.minCostPrice }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-table
            v-loading="loading"
            :data="dataList"
            border
            style="margin-top: 1px;">
            <el-table-column prop="code" label="日期" width="150" :show-overflow-tooltip="true" fixed="left">
              <template #default="scope">
                <div>{{setTimeFormat(scope.row.createTime)}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="purchaseNumber" label="采购数量" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="purchaseName" label="采购人" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="入库数量" width="150" :show-overflow-tooltip="true" v-if="queryParams.operationType !== '1'">
              <template #default="scope">
                <div class="textOverflow1" style="width: 120px;">{{scope.row.operationType === 0 ? scope.row.number : ''}}</div>
              </template>
            </el-table-column>
            <el-table-column label="入库人" width="150" :show-overflow-tooltip="true" v-if="queryParams.operationType !== '1'">
              <template #default="scope">
                <div class="textOverflow1" style="width: 120px;">{{scope.row.operationType === 0 ? scope.row.operatorName : ''}}</div>
              </template>
            </el-table-column>
            <el-table-column label="出库数量" width="150" :show-overflow-tooltip="true" v-if="queryParams.operationType !== '0'">
              <template #default="scope">
                <div class="textOverflow1" style="width: 120px;">{{scope.row.operationType === 1 ? scope.row.number : ''}}</div>
              </template>
            </el-table-column>
            <el-table-column label="出库人" width="150" :show-overflow-tooltip="true" v-if="queryParams.operationType !== '0'">
              <template #default="scope">
                <div class="textOverflow1" style="width: 120px;">{{scope.row.operationType === 1 ? scope.row.operatorName : ''}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="receivedNumber" label="领用数量" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="receivedName" label="领用人" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="deliveryNumber" label="配送数量" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="deliveryName" label="配送人" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="操作类别" width="100">
              <template #default="scope">
                <div v-for="(item, index) in good_in_out_storage" :key="index" v-show="item.value == scope.row.operationType">
                  <el-tag :type="item.elTagType" v-if="item.elTagType">{{ item.label }}</el-tag>
                  <div v-else>{{ item.label }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="notes" label="出入库备注" width="300" :show-overflow-tooltip="true">
              <template #header="scope">
                <div>{{queryParams.operationType === '0' ? '入库备注' : queryParams.operationType === '1' ? '出库备注' : '出/入库备注'}}</div>
              </template>
            </el-table-column>
            <el-table-column label="查看操作" align="center" fixed="right">
              <template #default="scope">
                <el-button type="primary" link @click="handleDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
            <template #empty>
              <el-empty description="暂无数据"/>
            </template>
          </el-table>
          <div class="pageFlex pageAlignCenter pageSpaceBetween" style="margin-top: 20px;">
            <div class="totalText">共计 {{total}} 条</div>
            <el-pagination background layout="prev, pager, next" :total="total" :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" @current-change="handleCurrentChange"/>
          </div>
          <div class="pageFlex" style="margin-top: 20px;">
              <div class="normalBtn pageFlex pageFlexCenter" @click="handleExport" v-hasPermi="['gasManage:stockManage:inventoryHistory:export']">
                  <el-icon class="normalBtn_icon2"><Download /></el-icon>
                  <div class="normalBtn_text">导出</div>
              </div>
          </div>
      </div>
      <el-dialog v-model="modalShow" :title="modalTitle" width="950">
        <div class="modalBox">
          <el-descriptions :column="4" border direction="vertical">
            <el-descriptions-item :rowspan="2" :width="200" label="商品图片">
              <el-image style="width: 100px; height: 100px" :src="setCoverUrl(form.cover)" v-if="modalShow"/>
            </el-descriptions-item>
            <el-descriptions-item label="商品ID" :width="200">{{form.goodsId}}</el-descriptions-item>
            <el-descriptions-item label="商品编码" :width="200">{{form.goodsNo || '暂无'}}</el-descriptions-item>
            <el-descriptions-item label="商品名称" :width="200">{{form.goodsName}}</el-descriptions-item>
            <el-descriptions-item label="商品条码"  :width="200">{{form.barCode || '暂无'}}</el-descriptions-item>
            <el-descriptions-item label="货架号"  :width="200">{{form.shelfId || '暂无'}}</el-descriptions-item>
            <el-descriptions-item label="货位号"  :width="200">{{form.locationId || '暂无'}}</el-descriptions-item>
            <el-descriptions-item label="采购成本价格" :width="200">￥{{ form.costPrice }}</el-descriptions-item>
            <el-descriptions-item label="市场参加价" :width="200">￥{{ form.price }} </el-descriptions-item>
            <el-descriptions-item label="单位" :width="200">{{ form.unit || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="规格" :width="200">{{ form.specs || '暂无' }}</el-descriptions-item>
            <div v-if="form.operationType === 0">
              <el-descriptions-item label="采购人" :width="200">{{ form.purchaseName || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="手机号" :width="200">{{ form.purchaseMobile || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="采购数量" :width="200">{{ form.purchaseNumber || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="采购凭证号" :width="200">{{ form.purchaseVoucherNo || '暂无' }}</el-descriptions-item>
              <el-descriptions-item :width="200" label="采购凭证">
                <el-image style="width: 100px; height: 100px" :src="setCoverUrl(form.purchaseVoucher)" v-if="modalShow"
                          @click="handlePreviewShow(setCoverUrl(form.purchaseVoucher))"/>
              </el-descriptions-item>
              <el-descriptions-item label="采购说明" :span="3">{{ form.purchaseRemarks || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="入库人" :width="200">{{ form.operatorName || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="入库数量" :width="200">{{ form.number || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="入库凭证号" :width="200" :span="2">{{ form.entryVoucherNo || '暂无' }}</el-descriptions-item>
              <el-descriptions-item :width="200" label="入库凭证">
                <el-image style="width: 100px; height: 100px" :src="setCoverUrl(form.entryVoucher)" v-if="modalShow"
                          @click="handlePreviewShow(setCoverUrl(form.entryVoucher))"/>
              </el-descriptions-item>
              <el-descriptions-item label="入库说明" :span="3">{{ form.notes || '暂无' }}</el-descriptions-item>
            </div>
            <div v-if="form.operationType === 1">
              <el-descriptions-item label="出库人" :width="200">{{ form.operatorName || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="出库数量" :width="200">{{ form.number || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="出库凭证号" :width="200" :span="2">{{ form.exitVoucherNo || '暂无' }}</el-descriptions-item>
              <el-descriptions-item :width="200" label="出库凭证">
                <el-image style="width: 100px; height: 100px" :src="setCoverUrl(form.exitVoucher)" v-if="modalShow"
                          @click="handlePreviewShow(setCoverUrl(form.exitVoucher))"/>
              </el-descriptions-item>
              <el-descriptions-item label="出库说明" :span="3">{{ form.notes || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="领用人" :width="200">{{ form.receivedName || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="手机号" :width="200">{{ form.receivedMobile || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="领用数量" :width="200">{{ form.receivedNumber || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="领用凭证号" :width="200">{{ form.receivedVoucherNo || '暂无' }}</el-descriptions-item>
              <el-descriptions-item :width="200" label="领用凭证">
                <el-image style="width: 100px; height: 100px" :src="setCoverUrl(form.receivedVoucher)" v-if="modalShow"
                          @click="handlePreviewShow(setCoverUrl(form.receivedVoucher))"/>
              </el-descriptions-item>
              <el-descriptions-item label="领用说明" :span="3">{{ form.receivedRemarks || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="配送人" :width="200">{{ form.deliveryName || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="手机号" :width="200">{{ form.deliveryMobile || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="配送数量" :width="200">{{ form.deliveryNumber || '暂无' }}</el-descriptions-item>
              <el-descriptions-item label="配送凭证号" :width="200">{{ form.deliveryVoucherNo || '暂无' }}</el-descriptions-item>
              <el-descriptions-item :width="200" label="配送凭证">
                <el-image style="width: 100px; height: 100px" :src="setCoverUrl(form.deliveryVoucher)" v-if="modalShow"
                          @click="handlePreviewShow(setCoverUrl(form.deliveryVoucher))"/>
              </el-descriptions-item>
              <el-descriptions-item label="配送说明" :span="3">{{ form.deliveryRemarks || '暂无' }}</el-descriptions-item>
            </div>
          </el-descriptions>
        </div>
      </el-dialog>
    </div>
</template>
<script setup>
import { computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { searchGoodByIdApi } from '@/api/gasManage/stockManage/goodInfo';
import { searchInventoryRecordApi } from '@/api/gasManage/stockManage/inventoryHistory';
import { ElLoading } from "element-plus";
const { proxy } = getCurrentInstance();
const { good_in_out_storage } = proxy.useDict("good_in_out_storage");
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  time: '',
  operationType: '',
  goodsId: ''
})
const loading = ref(false);
const total = ref(0);
const dataList = ref([]);
const formData = ref({})
const setTimeFormat = computed(() => {
  return time => {
    if(time){
      let date = new Date(time);
      return date.toLocaleString()
    }
    return ''
  }
})
function handleQuery(){
  if(queryParams.value.goodsId){
    queryParams.value.pageNum = 1;
    getList();
  }else{
    proxy.$modal.msgError('请输入商品ID进行查询！')
  }
}
async function getList(){
  loading.value = true;
  let params = JSON.parse(JSON.stringify(queryParams.value));
  if(params.time){
    params.startTime = params.time[0];
    params.endTime = params.time[1];
    delete params.time;
  }
  let data = await getHistoryList(params);
  if(data && Array.isArray(data)){
    dataList.value = data;
  }else{
    dataList.value = [];
  }
  loading.value = false;
}
function getHistoryList(params){
  return new Promise(resolve => {
    searchInventoryRecordApi(params).then(res => {
      total.value = Number(res.total);
      resolve(Array.isArray(res.rows) ? res.rows : []);
    }).catch(() => {resolve(false)})
  })
}
function handleCurrentChange(e){
  queryParams.value.pageNum = e;
  getList();
}
// ----------------------------------记录详情-------------------------------------
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const setCoverUrl = computed(()=>{
  return url => {
    if(url){
      return baseUrl+url
    }
    return  ''
  }
});
const modalShow = ref(false);
const modalTitle = ref('');
const form = ref({});
function handleDetail(row){
  handleModalShow(row.operationType === 0 ? '入库记录详情' : '出库记录详情');
  form.value = row;
}
function handleModalShow(name){
  proxy.resetForm('formRef');
  modalTitle.value = name;
  modalShow.value = true;
}
// ----------------------------导出--------------------------------
function handleExport(){
  let params = JSON.parse(JSON.stringify(queryParams.value));
  if(params.time){
    params.startTime = params.time[0];
    params.endTime = params.time[1];
    delete params.time;
  }
  proxy.download("stock/inventoryRecord/export", {
    ...params
  }, `出入库记录_${new Date().toLocaleDateString()}.xlsx`);
}
onMounted(()=>{
  queryParams.value.goodsId = route.params.id;
  initData();
})
const route = useRoute();
async function initData(){
  const loading = ElLoading.service({
    lock: true,
    text: '加载中~',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  let result = await getGoodInfoApi(queryParams.value.goodsId);
  if(result){
    formData.value = result;
    handleQuery();
    loading.close();
  }else{
    formData.value = {}
    loading.close();
    proxy.$modal.alertError('暂无该商品！')
  }
}
function getGoodInfoApi(id){
  return new Promise((resolve, reject) => {
    searchGoodByIdApi(id).then(res => {
      resolve(res.data);
    }).catch(() => {
      resolve(false)
    })
  })
}
</script>
<style lang='scss' scoped>
@import "@/assets/styles/public.scss";
.normalBtn{
    &_icon2{
        margin-right: 10px;
        color: $normalBtnColor;
    }
    &_text{
        color: $normalBtnColor;
    }
    &:hover{
        outline: 1px solid $normalBtnColor;
    }
}
.app-container{
  width: 100%;
  min-height: calc(100vh - 66px);
  background: #F8F8F9;
  .contentBox{
    width: 100%;
    min-width: 1200px;
    min-height: $pageMinHeight;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 12px;
    .selectBox{
        width: 100%;
        background-color: $formBgSet;
        .title{
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: white;
            font-size: 16px;
            background: var(--el-color-primary);
        }
        .dateLabel{
            color: $colorText1;
            line-height: 40px;
        }
    }
    .title{
      width: 100%;
      height: 60px;
      line-height: 60px;
      font-size: 18px;
      text-indent: 1em;
      font-weight: bold;
      border-top: 1px solid $borderColor;
      border-left: 1px solid $borderColor;
      border-right: 1px solid $borderColor;
      background-color: $formBgSet;
    }
    .tableTitle{
        width: 100%;
        border-top: 1px solid $borderColor;
        border-right: 1px solid $borderColor;
        .partName{
            width: 130px;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
            text-indent: 1em;
            border-left: 1px solid $borderColor;
            border-right: 1px solid $borderColor;
            border-bottom: 1px solid $borderColor;
        }
        .value{
            flex: 1;
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            color: $colorText1;
            border-bottom: 1px solid $borderColor;
        }
        &:deep(.el-form-item){
          margin: 0;
          flex: 1;
          border-bottom: 1px solid $borderColor;
        }
    }
    &:deep(.el-input__wrapper){
      background-color: $formBgSet;
      box-shadow: none;
    }
    &:deep(.el-date-editor){
      padding: 0 20px;
    }
    :deep(.el-select){
      .el-select__wrapper{
        background-color: $formBgSet;
        box-shadow: none;
      }
    }
    .inputBox{
      width: 300px;
      padding: 0 9px;
    }
  }
}
.descriptionsContent{
  width: 750px;
  :deep(p){
    width: 750px;
  }
  :deep(img){
    width: 750px;
  }
}
</style>